<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../comm/buy_comm.css"/>
    <link rel="stylesheet" type="text/css" href="./css/goods.css">
    <style>
      .goods-info .goods-share {
        z-index: 5;
      }
      .buy-header {
        overflow: visible;
      }
      [v-cloak] {
        display: none!important;
      }
      .small-font {
        font-size: 14px;
      }
      .small-font img {
        width: 15px!important;
        height: 15px!important;
      }
      .js-show {
        display: none;
      }
      .js-cart-count {
        display: none;
        font-size: 8px!important;
      }

    </style>
    <title>商品详情</title>
</head>

<body>
	<div class="buy-header" id="buyHeader">
      	<span class="buy-head-back" id="btn-back">
      		<img src="../../../image/shop/buy/buy-04.png"/>
      	</span>
      	<span class="buy-head-cart">
      		<img src="../../../image/shop/buy/buy-05.png"/>
          <i style="display: none" class="js-cart-count"></i>
      	</span>
        <span class="buy-head-nav">
      		<img src="../../../image/shop/buy/buy-06.png"/>
          <div class="nav-dio-top">
            <div>
              <img src="../../../image/shop/shop.png" alt="">
              <p>商城首页</p>
            </div>
            <!-- <div>
              <img src="../../../image/shop/card.png" alt="">
              <p>我的名片</p>
            </div> -->
          </div>
      	</span>
  	</div>
  	<div class="container" v-cloak>
  		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-if="goodsImages.length == 0">
		        	<img :src="goodsInfo.cover" />
		        </div>
		        <div class="swiper-slide" v-if="goodsImages.length > 0" v-for="(item,index) in goodsImages" @click="showBigImg(index)">
		        	<img :src="item.url" />
		        </div>
		    </div>
        <div class="swiper-pagination dio"></div>
		  </div>

      <div class="js-show">
        <!-- 其他标签商品价格 -->
        <div class="goods-price-sock" v-if="goodsInfo.tag != 1">
          <div class="goods-price">
            <!-- 出售价格 -->
            <!-- 最低价 -->
            ￥<span>{{getLowPrice}}</span>
            <!-- 最高价 -->
            <em v-if="goodsOptions.length > 1&&parseFloat(getLowPrice)<parseFloat(countTopPrice)">
              <span v-if="countTopPrice">~</span>
              <em v-if="countTopPrice" style="font-style: normal!important;">￥<span>{{countTopPrice}}</span></em>
            </em>

            <!-- 市场 -->
            <!-- <i>
              ￥{{getLowMarketPrice}}
              <em v-if="goodsOptions.length > 1">
                <i v-if="getTopMarketPrice" style="padding-left:0!important;">
                  ~￥{{getTopMarketPrice}}
                </i>
              </em>
            </i> -->
          </div>
          <div class="stock">库存{{allStock}}</div>
        </div>

        <!-- 秒杀价格及倒计时 -->
        <!-- 秒杀未开始 -->
        <div class="goods-price-sock" v-show="goodsInfo.tag == 1 && isNotStart" style="background:rgb(255,245,235)" v-cloak>
          <div class="goods-price" style="display:flex">
            <span>￥{{getLowPrice}}</span>
            <!-- 最高价 -->
            <em v-if="goodsOptions.length > 1">
              <span v-if="countTopPrice">~</span>
              <em v-if="countTopPrice" style="font-style: normal!important;">￥<span>{{countTopPrice}}</span></em>
            </em>
            <div v-if="isNotStart">
              <!-- <i>
                ￥{{getLowMarketPrice}}
                <em v-if="goodsOptions.length > 1">
                  <i v-if="getTopMarketPrice" style="padding-left:0!important;">
                    ~￥{{getTopMarketPrice}}
                  </i>
                </em>
              </i> -->
              <div class="time-count" v-cloak style="color: rgb(255,103,75);">
                限量{{allStock}}件
              </div>
            </div>
          </div>
          <div v-if="isNotStart" class="stock" style="color: rgb(255,103,75);font-size:12px;">抢完即止</div>
        </div>

        <!-- 秒杀中 -->
        <div class="goods-price-sock" v-show="goodsInfo.tag == 1 && (!isNotStart && !isOver)" style="background:rgb(255,245,235)" v-cloak>
          <div class="goods-price" style="display:flex">
            <span v-if="goodsInfo.tag != 1">￥{{getLowPrice}}</span><span v-if="goodsOptions.length > 1">起</span>
            <span v-if="goodsInfo.tag == 1">￥{{getLowKillPrice}}</span><span v-if="goodsOptions.length > 1">起</span>
            <div v-if="!isOver && !isNotStart">
              <i>￥{{getLowMarketPrice}}</i>
              <div class="time-count" v-cloak>
                <span v-for="t in showTime.h">{{t}}</span>:
                <span v-for="t in showTime.m">{{t}}</span>:
                <span v-for="t in showTime.s">{{t}}</span>
              </div>
            </div>
          </div>
          <div class="stock" style="color: rgb(255,103,75)">仅剩{{allStock}}件</div>
        </div>

        <!-- 秒杀已结束 -->
        <div class="goods-price-sock" v-show="goodsInfo.tag == 1 && (isOver && !isNotStart)" style="background:rgb(255,245,235)" v-cloak>
          <div class="goods-price">
            <!-- 最低价 -->
            ￥<span>{{getLowPrice}}</span>
            <!-- 最高价 -->
            <em v-if="goodsOptions.length > 1">
              <span v-if="countTopPrice">~</span>
              <em v-if="countTopPrice" style="font-style: normal!important;">￥<span>{{countTopPrice}}</span></em>
            </em>

            <!-- 市场 -->
            <!-- <i>
              ￥{{getLowMarketPrice}}
              <em v-if="goodsOptions.length > 1">
                <i v-if="getTopMarketPrice" style="padding-left:0!important;">
                  ~￥{{getTopMarketPrice}}
                </i>
              </em>
            </i> -->
          </div>
          <div class="stock">库存{{allStock}}</div>
        </div>

    		<div class="goods-info">
          <div class="title-share">
            <h2>
              {{goodsInfo.name}}
            </h2>

            <div class="goods-share" @click="showShare">
              <img src="../../../image/shop/share.png" alt="">
              <span>分享</span>
            </div>
          </div>
    			<p>已出售{{goodsInfo.sale_count + goodsInfo.virtual_count}}件<span><img src="../../../image/shop/buy/buy-12.png"/>{{shopInfo.shop_location ? locationChange : '暂无'}}</span></p>
    		</div>
    		<ul class="goods-select-ul" :style="goodsInfo.tag != 0 ? 'margin: 0': ''">
          <li class="ban" v-if="goodsInfo.tag != 0 && !isOver" :style="'background:'+selectColor">
            <img v-if="goodsInfo.tag == 4" src="../../../image/shop/9.9.png" alt="9.9特卖">
            <img v-if="goodsInfo.tag == 3" src="../../../image/shop/shop_index_4.png" alt="名品打折">
            <img v-if="goodsInfo.tag == 2" src="../../../image/shop/shop_index_2.png" alt="品牌清仓">
            <img v-if="goodsInfo.tag == 1" src="../../../image/shop/shop_index_5.png" alt="限时秒杀">
            <span v-if="goodsInfo.tag == 4">
              <span class="active-title" :style="'color:'+selectFontColor">9块9特卖</span>
              <span class="active-text">好品大甩卖</span>
            </span>
            <span v-if="goodsInfo.tag == 3">
              <span class="active-title" :style="'color:'+selectFontColor">名品折扣</span>
              <span class="active-text">大牌名品低价购</span>
            </span>
            <span v-if="goodsInfo.tag == 2">
              <span class="active-title" :style="'color:'+selectFontColor">品牌清仓</span>
              <span class="active-text">放心品质 低价清仓</span>
            </span>
            <span v-if="goodsInfo.tag == 1">
              <span class="active-title" :style="'color:'+selectFontColor">限时秒杀</span>
              <span class="active-text">准时抢好品 限量不等人</span>
            </span>
    			</li>
    			<li class="goods-serve" @click="goodsServer" v-if="goodsInfo.seven_reason || goodsInfo.genuine || goodsInfo.speed_return" :style="'background:'+selectColor">
    				<sapn class="small-font" v-if="goodsInfo.seven_reason" style="color: #000;"><img :src="selectIcon" />七天无理由</sapn>
            <sapn class="small-font" v-if="goodsInfo.genuine" style="color: #000;"><img :src="selectIcon"/>正品保证</sapn>
    				<!-- <sapn class="small-font" v-if="goodsInfo.speed_return" style="color: #000;"><img :src="selectIcon"/>极速退款</sapn> -->
    				<i></i>
    			</li>


    			<li class="goods-type" @click="goodsType">
    				<span style="color:#000 !important">型号</span><span class="color9" v-text="choicInfo ? choicInfo.name+'×'+number : ''">型号</span>
    				<i></i>
    			</li>
    		</ul>

        <div class="goods-shop" v-if="goodsInfo.is_member_product!=1">
          <div class="shop-msg">
            <div class="shop-avater">
              <img :src="shopInfo.shop_logo" alt="">
            </div>
            <div class="shop-msg">
              <div>
                <p v-text="shopInfo.shop_name">店铺名字</p>
                <p>
                  <!-- <span>库存{{allStock}}</span> -->
                  <span>已售出{{allCount}}件</span>
                </p>
              </div>
              <div class="into-shop" @click="toShop">进店逛逛</div>
            </div>
          </div>
          <div class="goods-shop-msg">
            <div class="goods-shop-msg-detail" v-for="item in goodsInfo.shop_goods" @click="toOtherGoods(item.goods_id)">
              <div class="goods-img">
                <img :src="item.goods_image+'?x-oss-process=image/resize,m_lfit,w_960'" alt="">
              </div>
              <div class="goods-shop-msg-detail-goods">
                <div v-text="item.goods_name">商品标题商品标题商品标题商品标题</div>
                <p>
                  <span>￥{{item.sale_price}}</span>
                  <span>已售出{{item.sale_count}}件</span>
                </p>
              </div>
            </div>
          </div>
        </div>

    		<div class="goods-detail">
    			<ul class="goods-detail-tab" @click="goodsDetailTab">
    				<li :class="tabIndex == 0 ? 'active' : ''" data-index="0"><span data-index="0">图文详情</span></li>
    				<li :class="tabIndex == 1 ? 'active' : ''" data-index="1"><span data-index="1">产品评价</span></li>
    			</ul>
    			<div class="goods-detail-list" ref="goodsDetailList">
    				<div class="goods-detail-imgTxt active">
    					<p v-if="!goodsInfo.description">暂时还没有详情！</p>
              <div v-if="goodsInfo.description" v-html="goodsInfo.description"></div>
    				</div>
    				<div class="goods-detail-comment">
              <p v-if="commentList.length == 0">暂时还没有评论！</p>
    					<ul v-if="commentList.length > 0">
    						<li v-for="item in commentList">
    							<div>
    								<img :src="item.avater"/>
    								<h2 v-text="item.is_anony ? '匿名用户' : item.nickname">空间等级</h2>
    								<span v-text="item.date_add">2018-08-15 12:23</span>
                    <span v-if="item.score == 0" class="comment-leave">差评</span>
                    <span v-if="item.score == 1" class="comment-leave">中评</span>
                    <span v-if="item.score == 2" class="comment-leave">好评</span>
    							</div>
    							<div v-text="item.content" style="word-wrap: break-word;">
    								发货的时间开发商的开奖号房价快速的好看
    							</div>
                  <div class="comment-img-list" v-if="item.images">
                    <div class="comment-img" v-for="list in item.images" @click="lookBigImg">
                      <img :src="list" alt="评论">
                    </div>
                  </div>
                  <p v-if="item.reply_content">店家回复: <span>{{item.reply_content}}</span></p>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>
  		<div class="goods-serve-detail goods-pop" ref="goodsServeDetail">
  			<div class="goods-pop-bg" @click="goodsServeDetailBg"></div>
  			<ul class="goods-pop-main">
  				<li v-if="goodsInfo.seven_reason">
  					<span></span>
  					<h2>七天无理由</h2>
  					<p>
  						商家承诺7天无理由退货
  					</p>
  				</li>
  				<li v-if="goodsInfo.genuine">
  					<span></span>
  					<h2>正品保证</h2>
  					<p>
  						若收到商品是假冒产品，可获得十倍赔偿
  					</p>
  				</li>
          <!-- <li v-if="goodsInfo.speed_return">
  					<span></span>
  					<h2>极速退款</h2>
  					<p>
  						极速退款是为诚信会员提供的退款退货的专享权力，额度是根据每个用户当前的信誉评级情况而定
  					</p>
  				</li> -->
  			</ul>
  		</div>

      <div class="goods-serve-detail goods-pop" ref="goodsyon">
  			<div class="goods-pop-bg" @click="goodsyonBg"></div>
  			<ul class="goods-pop-main">
  				<li v-if="goodsInfo.commission2_rate">
  					<span></span>
  					<h2>一级分佣</h2>
  					<p>
  						一级分佣：{{goodsInfo.commission1_rate}}%
  					</p>
  				</li>
  				<li v-if="goodsInfo.commission2_rate">
  					<span></span>
  					<h2>二级分佣</h2>
  					<p>
  						二级分佣：{{goodsInfo.commission2_rate}}%
  					</p>
  				</li>
  			</ul>
  		</div>

  		<div class="goods-coupon-detail goods-pop" ref="goodsCouponDetail">
  			<div class="goods-pop-bg" @click="goodsCouponDetailBg"></div>
  			<div class="goods-pop-main">
  				<h2>店铺优惠</h2>
  				<ul style="position: relative; height:220px; overflow-y: auto;">
            <li v-for="(item,index) in goodsInfo.coupon_list" style="margin-top: 5px;">
    					<div>
    						<span><i>¥</i>{{item.amount}}</span>
    						<p><i>订单金额满{{item.min_goods_amount}}元可使用 </i> 有效期 {{item.limit_time}}</p>
    					</div>
    					<a href="javascript:void(0);" class="getDiscount" :style="item.is_get==1?'background:gray':''" @click="getDiscount(item.coupon_discount_id,item.is_get,index)"><span>立即领取</span></a>
    				</li>
  				</ul>
  			</div>
  		</div>


  		<div class="goods-type-detail goods-pop" ref="goodsTypeDetail" >
  			<div class="goods-pop-bg" @click="goodsTypeDetailBg"></div>
  			<div class="goods-pop-main">
  				<div class="type-title">
  					<div class="img" @click="showBigImgs(chocOption.option_image)">
  						<img :src="chocOption.option_image" width="100%" height="100%"/>
  					</div>
            <h2 v-if="goodsInfo.tag != 1">¥{{(chocOption.sale_price * number).toFixed(2)}}</h2>
  					<h2 v-if="goodsInfo.tag == 1">¥{{isOver ? (chocOption.sale_price * number).toFixed(2) : (chocOption.kill_price * number).toFixed(2)}}</h2>
  					<p>库存：{{chocOption.stock}}</p>
  				</div>
  				<div class="sizeColor">
  					<h2>型号尺寸</h2>
  					<ul>
  						<li v-for="(item,index) in goodsInfo.goods_options" class="list-item-js" v-text="item.name" @click="selectOption(item.name,item.goods_id,item.sale_price, item.stock, item.id, index)" >水蜜桃</li>
  					</ul>
  				</div>
  				<div class="plusMiuns">
  					<h2>数量</h2>
  					<div class="plus-miuns-input">
  						<a href="javascript:void(0);" class="disabled" @click="goodsNum('reduce')" :style="number > 1 ? 'color: #000;' : ''">-</a>
  						<input type="number" name="" :value="number" class="number-goods" disabled/>
  						<a href="javascript:void(0);" @click="goodsNum('add')" :class="(number >= chocOption.stock || goodsInfo.is_member_product==1)? 'disabled' : ''">+</a>
  					</div>
  				</div>
  			</div>
  		</div>
  		<div class="googds-footer-nav" v-if="!isSeller && goodsInfo.tag != 1">
        <a href="javascript:void(0);" class="goods-nav-sell" @click="toShop" v-if="goodsInfo.is_member_product!=1">
  				<img src="../../../image/shop/to-shop.png"/><span>店铺</span>
  			</a>
  			<!-- <a href="javascript:void(0);" class="goods-nav-sell" @click="toChar">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
        <!-- <a href="javascript:void(0);" class="goods-nav-sell">
  				<img src="../../../image/shop/buy/buy-10.png"/><span>客服</span>
  			</a> -->
  			<a href="javascript:void(0);" class="goods-nav-collect" @click="favorGoods" v-if="goodsInfo.is_member_product!=1">
  				<img :src="isCollect ? '../../../image/shop/buy/loveyou.png': '../../../image/shop/buy/buy-11.png'" />收藏
  			</a>
  			<a href="javascript:void(0);" class="goods-nav-cart" @click="addToCart" v-if="goodsInfo.is_member_product!=1">
  				加入购物车
  			</a>
  			<a href="javascript:void(0);" :class="goodsInfo.is_member_product==1?'member_button':''" @click="buyNow">
  				立即购买
  			</a>
  		</div>
      <div class="share-mask" v-if="shareShow" @click="hideShare"></div>
      <div class="share-loaction" :class="shareShow ? 'show-loaction' : ''">
        <div class="to-where">
          <div @click="shareToWx(1)">
            <img src="../../../image/shop/buy/buy-64.png"/>
            分享给好友
          </div>
          <div @click="shareToWx(2)">
            <img src="../../../image/shop/buy/buy-63.png"/>
            分享到朋友圈
          </div>
        </div>
      </div>
      <div style="height: 60px;" v-if="!isSeller && goodsInfo.tag != 1"></div>
      </div>
  	</div>
</body>
<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script type="text/javascript" src="./js/goods.js"></script>

</html>
